<template>
  <div class="app" style="text-align: center; background-color: #f0f9eb;">
    <span style="display: block; width: 100%; text-align: center; margin-top: 10px">我的</span>
    <!-- 用户信息展示 -->
    <div class="user-info" style="display: flex; align-items: center; padding: 10px;">
      <van-avatar
          size="large"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          style="margin-right: 10px;"
      />
      <div class="user-details" @click="puthGeren">
        <div class="user-avatar"><img :src="user.avatarUrl"></div>
        <div class="user-name" style="font-size: 16px; color: #333;">{{ user.username }}</div>
        <div class="user-level" style="font-size: 14px; color: #999;">{{ user.membershipLevel }}</div>
      </div>
    </div>
    <!-- 功能列表 -->
    <van-cell-group style="margin-top: 10px;">
      <div style="display: flex; justify-content: space-around; background-color: #fff; padding: 10px;">
        <div style="text-align: center;" @click="puthMoney">
          <div style="font-size: 14px; color: #999;">账户余额</div>
          <div style="font-size: 16px; color: #333;">{{ user.accountBalance }}</div>
        </div>
        <div style="text-align: center;" @click="puthYouhuijuan">
          <div style="font-size: 14px; color: #999;">优惠券</div>
          <div style="font-size: 16px; color: #333;">{{ count }}</div>
        </div>
      </div>
      <van-cell title="联系客服" is-link @click="contactCustomerService" style="background-color: #fff; padding: 10px; margin-top: 5px;" />
      <van-cell title="反馈问题" is-link @click="feedback" style="background-color: #fff; padding: 10px; margin-top: 5px;" />
      <van-cell title="关于我们" is-link @click="aboutUs" style="background-color: #fff; padding: 10px; margin-top: 5px;" />
      <van-cell title="常用地址" is-link @click="commonAddresses" style="background-color: #fff; padding: 10px; margin-top: 5px;" />
      <van-cell title="设置" is-link @click="settings" style="background-color: #fff; padding: 10px; margin-top: 5px; margin-bottom: 10px;" />
    </van-cell-group>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item replace to="/homepage" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant"; // 引入 Toast 组件

export default {
  data() {
    return {
      active: 3,
      user: {},
      count: 0,
    };
  },
  created() {
    const userStr = sessionStorage.getItem("userDB");
    if (userStr) {
      try {
        this.user = JSON.parse(userStr);
        console.log(this.user.username);
      } catch (error) {
        console.error("解析用户数据失败:", error);
      }
    } else {
      console.log("没有找到用户数据");
    }
    axios.get(`http://localhost:10086/api/admin/user/getCountCoupon/${this.user.id}`).then(res => {
      this.count = res.data.data;
      console.log(res);
    });
  },
  methods: {
    goToServiceCenter() {
      console.log("Go to service center");
    },
    contactCustomerService() {
      window.location.href = 'tel:15525750214';
    },
    feedback() {
      this.$router.push('/feedback');
    },
    aboutUs() {
      this.$router.push('/aboutUs');
    },
    commonAddresses() {
      this.$router.push('/address');
    },
    settings() {
      Toast('该功能正在维护中'); // 显示提示信息
    },
    puthGeren() {
      this.$router.push('/geren');
    },
    puthMoney() {
      this.$router.push('/money');
    },
    puthYouhuijuan() {
      this.$router.push(`/youhuijuan`);
    },
  },
};
</script>

<style>
.app {
  padding: 0 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
